<template>
    <div class="login">
            <div style="height: 100vh; overflow: hidden "  >
                <div class="building">
                    <div style="margin:30px;text-align: center;font-size: 40px;font-weight: bold;color: black;font-family: 楷体">注册</div>
                    <el-form :model="admin"  ref="registerForm" :rules="rules" >
                        <el-form-item prop="username" label-width="80px">
                            <el-input  style="width: 250px " placeholder="请输入账号" prefix-icon="el-icon-user " size="medium" v-model="admin.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" label-width="80px">
                            <el-input style="width: 250px " placeholder="请输入密码" show-password prefix-icon="el-icon-lock " size="medium" v-model="admin.password"></el-input>
                        </el-form-item>
                      <el-form-item prop="phone" label-width="80px">
                        <el-input style="width: 250px " placeholder="请输入手机号码"  prefix-icon="el-icon-phone " size="medium" v-model="admin.phone"></el-input>
                      </el-form-item>
                      <el-form-item prop="email" label-width="80px">
                        <el-input style="width: 250px " placeholder="请输入邮箱"  prefix-icon="el-icon-message " size="medium" v-model="admin.email"></el-input>
                      </el-form-item>
                        <el-form-item >
                          <el-button style="margin-left: 110px" size="info" type="primary"  @click="$router.push('/login')">
                            返回
                          </el-button>
                          <el-button size="medium" type="success" @click="register">
                            注册
                          </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

</template>

<script>
    import request from "@/util/request";
    import Cookies from 'js-cookie';
    export default {
      name: "register",
      data() {
        const checkPhone = (rule, value, callback) => {

          if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)){
            callback(new Error("请输入正确的联系方式"))
          }
          callback()
        };
        return {
          admin: {},
          rules: {
            username: [
              {required: true, message: '请输入用户名', trigger: 'blur'},
            ],
            password: [
              {required: true, message: '请输入新密码', trigger: 'blur'},
              {min: 6, max: 12, message: "长度在6-12个字符", trigger: 'blur'}
            ],
            phone:[
              {validator: checkPhone, trigger: 'blur' }
            ],
            email: [
              {required: true, message: '邮箱', trigger: 'blur'},
            ]
          },
        }
      },
      methods: {
        register() {
          this.$refs['registerForm'].validate((valid) => {
            if (valid) {
              request.post('/admin/add', this.admin).then(res => {
                if (res.code == "200") {
                  this.$notify.success("注册成功")
                  this.$router.push("/login")
                } else {
                  this.$notify.error(res.msg)
                }
              })
            }
          })
        }
      }
    }


</script>
<style>
    .login{
        /* 背景图不平铺 */
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background: url("../../assets/register.jpg") no-repeat fixed center center;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */


    }
    .building{
      background: rgba(255, 255, 255, 0.3) ;
      width:380px;
      height:350px;
      margin-left: 720px;
      margin-top: 300px;



    }
    .cover {
        width: fit-content;
        background-color: white;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }

</style>
